.page {
  background-color: #f0f0f0;
  height: 100%;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background-color: #fff;

    .userinfo {
      display: flex;
      align-items: center;
      .icon {
        padding-right: 30rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }
      .login {
        font-size: 28rpx;
        color: #666;
      }
      .message {
        .nick {
          font-size: 28rpx;
          color: #333;
        }
        .score {
          margin-top: 12rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .setting {
      width: 48rpx;
      height: 48rpx;
      padding: 8rpx 0 8rpx 8rpx;
    }
  }

  .content {
    width: 100%;
    margin-top: 20rpx;

    .order {
      .titleBar {
        background: #fff;
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        border-bottom: 1px solid #f6f6f6;
        padding: 0 30rpx;
        .more {
          font-size: 20rpx;
          color: #666;
          display: flex;
          align-items: center;
        }
      }

      .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 25rpx;
        height: 140rpx;
        background: #fff;
        .items {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 20rpx;
          }
          .num-badge {
            position: absolute;
            top: -15rpx;
            right: -12rpx;
            color: #e02e2e;
            font-weight: bold;
            // border: 3rpx solid #e02e2e;
            border-radius: 50rpx;
            background: #fff;
            min-width: 30rpx;
            height: 30rpx;
            line-height: 30rpx;
            text-align: center;
            padding: 2rpx;
            display: block;
          }
        }
      }
    }

    .collect {
      margin-top: 20rpx;
      background: #fff;
      display: flex;
      justify-content: space-around;
      padding: 30rpx 0 10rpx 0;
      font-size: 12px;
      .item {
        text-align: center;
        .num {
          font-size: 32rpx;
          font-weight: 700;
          color: #e02e2e;
        }
        .text {
          line-height: 34px;
        }
      }
    }

    .menu {
      margin-top: 20rpx;
      background-color: #fff;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80rpx;
        border-bottom: 2rpx solid #f0f0f0;
        padding: 0 30rpx;
        &:nth-child(1) {
          border-top: 2rpx solid #f0f0f0;
        }
        &:last-child {
          border-bottom: none;
        }
        text {
          font-size: 24rpx;
          color: #000;
        }
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        .name {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .arrow {
    width: 15rpx;
    height: 15rpx;
    border-top: 2rpx solid #999;
    border-right: 2rpx solid #999;
    transform: rotate(45deg);
    margin-left: 10rpx;
  }
}
